@import "@/common/constants/StyleConst.scss";

.customer-container {
  height: calc(100vh - 56px);
  background-color: $color-theme-blue;
  transition: unset;

  .v-main__wrap {
    display: flex;
  }

  .left-container {
    width: 25%;
    min-width: 366px;
    background-color: $color-bg-white;
    height: 100%;
  }

  .right-container {
    height: 100%;
    width: 75%;
    margin: 0 16px;

    .tabs-wrap {
      margin-top: 20px;
      background-color: transparent;

      .v-tabs-bar {
        background-color: inherit;

        .v-tabs-bar__content {
          border-radius: 8px 8px 0 0;
        }
      }

      .v-tab.tab:not(.active) {
        background-color: #D9D9D9;
        color: $color-theme-navy;
      }

      .tab {
        text-transform: unset;
        font-weight: bold;

        &.active {
          color: #FFFFFF;
          background-color: $color-theme-navy;
        }

        &:first-child {
          border-top-left-radius: inherit;
        }

        &:last-child {
          border-top-right-radius: inherit;
        }
      }
    }
  }
}

.skeletonLoaderRight {
  right: 0;
}